import { useState } from 'react';
import { Map, MapControl } from '@/compnents';
import { RestorationIcon } from '@/compnents/icons';
import { DanmakuKit } from '@/platform/mobile/components';
import type { ISMap } from '@/compnents';
import './map.less';

export const MapPage = () => {
  const [map, setMap] = useState<ISMap>();

  const onRestorationClick = () => {
    if (map) map.restoration();
  };

  return (
    <>
      <Map onReady={setMap} dispatch={() => {}} />
      {map && (
        <>
          <MapControl map={map} render={<RestorationIcon onClick={onRestorationClick} />} />
          <MapControl map={map} render={<DanmakuKit map={map} />} />
        </>
      )}
    </>
  );
};
